<style type="text/css">

    #dhtmlgoodies_dragDropContainer{	/* Main container for this script */
        width: 100%;
    }

    #dhtmlgoodies_dragDropContainer .thetaskcontainer{	/* Main container for this script */
        background-color: #aeb6b9;
    }

    #dhtmlgoodies_dragDropContainer ul{	/* General rules for all <ul> */
        margin-top:0px;
        margin-left:0px;
        margin-bottom:0px;
        padding:0px;
    }

    #dhtmlgoodies_dragDropContainer li,#dragContent li,li#indicateDestination{	/* Movable items, i.e. <LI> */
        background-color: #f3f3d1; border-top:solid 1px #ffffff; border-bottom: solid 1px #d8d8b0; font-size: 13px; padding: 3px;
    }

    #dhtmlgoodies_dragDropContainer .onetask{border: none; padding-left: 20px;}
    #dhtmlgoodies_dragDropContainer .onetask div{border: none;}
    #dhtmlgoodies_dragDropContainer .onetask:hover{background-color: #f0f0c6;}
    #dhtmlgoodies_dragDropContainer .onetask .title{float:left; margin: 0 5px;}
    #dhtmlgoodies_dragDropContainer .onetask .title span{color:#aaaaaa; font-size: 11px; margin-left: 5px;}
    #dhtmlgoodies_dragDropContainer .onetask .process{float:right; margin: 0 5px; text-align: right;}
    #dhtmlgoodies_dragDropContainer .onetask .process img{float:right; margin-left: 5px;}
    #dhtmlgoodies_dragDropContainer .onetask .processname{float:right; font-style: italic; color: #006633; font-size: 11px;  }
    #dhtmlgoodies_dragDropContainer .onetask .projectname{font-style: italic; color: #006633; font-size: 8px; text-transform: uppercase; }

    #col1 .onetask{ background-image: url(/images/gray.png); background-repeat: no-repeat; background-position: 3px 10px;}
    #col1 .lateme{ background-image: url(/images/red.png);}
    #col1 .lateother{ background-image: url(/images/orange.png);}
    #col2 .onetask{ background-image: url(/images/green.png); background-repeat: no-repeat; background-position: 3px 10px;}
    #col2 .lateme{ background-image: url(/images/red.png);}
    #col2 .lateother{ background-image: url(/images/orange.png);}
    #col3 .onetask{ background-image: url(/images/ready.png); background-repeat: no-repeat; background-position: 3px 10px;}
    #col3 .lateme{ background-image: url(/images/ready_red.png);}
    #col3 .lateother{ background-image: url(/images/ready_orange.png);}

    li#indicateDestination{	/* Box indicating where content will be dropped - i.e. the one you use if you don't use arrow */
        border:1px dotted #600;
        background-color:#FFF;
    }

    #dhtmlgoodies_dragDropContainer ul li.correctAnswer{	/* Correctly moved item */

    }
    #dhtmlgoodies_dragDropContainer ul li.wrongAnswer{	/* Item moved to wrong box */

    }


        /* LEFT COLUMN CSS */
    div#dhtmlgoodies_listOfItems{	/* Left column "Available students" */

        width: 29%;  min-height: 400px; border: solid 3px #333333; max-height: 80%; overflow: auto; background-color: #aeb6b9; color: #000000; float: left; margin: 3px;

    }
    #dhtmlgoodies_listOfItems ul{	/* Left(Sources) column <ul> */
        height:auto;

    }

    div#dhtmlgoodies_listOfItems div{
        /*border:1px solid #999;
    }
    div#dhtmlgoodies_listOfItems div ul{	/* Left column <ul> */
        margin-left:0px;	/* Space at the left of list - the arrow will be positioned there */
    }
    #dhtmlgoodies_listOfItems div p{	/* Heading above left column */
        background-color: #333333; color: #ffffff; font-size: 11px; text-transform: uppercase; font-weight: bold; padding: 2px; margin: 0;
    }
        /* END LEFT COLUMN CSS */

    #dhtmlgoodies_dragDropContainer .mouseover{	/* Mouse over effect DIV box in right column */
        background-color:#E2EBED;
        border:1px solid #317082;
        width: 45%;float: left; border: solid 3px #333333; margin: 3px;
    }

        /* Start main container CSS */

    div#dhtmlgoodies_mainContainer{	/* Right column DIV */
        width:66%;
        float:left;
    }

    div#dhtmlgoodies_mainContainer .thetaskcontainer{width: 45%;float: left; border: solid 3px #333333; margin: 3px;}

    #dhtmlgoodies_mainContainer div{	/* Parent <div> of small boxes */


    }
    #dhtmlgoodies_mainContainer div ul{
        margin-left:0px;
    }

    #dhtmlgoodies_mainContainer div p{	/* Heading above small boxes */
        background-color: #333333; color: #ffffff; font-size: 11px; text-transform: uppercase; font-weight: bold; padding: 2px; margin: 0;
    }

    #dhtmlgoodies_mainContainer ul{	/* Small box in right column ,i.e <ul> */
        min-height: 400px;

    }

    #dragContent{	/* Drag container */
        position:absolute;
        width:30%;
        height:auto;
        display:none;
        margin:0px;
        padding:0px;
        z-index:2000;
    }

    #dragDropIndicator{	/* DIV for the small arrow */
        position:absolute;
        width:7px;
        height:10px;
        display:none;
        z-index:1000;
        margin:0px;
        padding:0px;
    }
</style>
<style type="text/css" media="print">
    div#dhtmlgoodies_listOfItems{
        display:none;
    }
    img{
        display:none;
    }
    #dhtmlgoodies_dragDropContainer{
        border:0px;
        width:100%;
    }
</style>
<script type="text/javascript">
    /************************************************************************************************************
     Copyright (C) December 2005  DTHMLGoodies.com, Alf Magne Kalleland

     This library is free software; you can redistribute it and/or
     modify it under the terms of the GNU Lesser General Public
     License as published by the Free Software Foundation; either
     version 2.1 of the License, or (at your option) any later version.

     This library is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
     Lesser General Public License for more details.

     You should have received a copy of the GNU Lesser General Public
     License along with this library; if not, write to the Free Software
     Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

     Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
     written by Alf Magne Kalleland.

     Alf Magne Kalleland, 2010
     Owner of DHTMLgoodies.com

     ************************************************************************************************************/

    /* VARIABLES YOU COULD MODIFY */
    var boxSizeArray = [5,5,5,5,5,5,5];	// Array indicating how many items there is rooom for in the right column ULs

    var arrow_offsetX = -5;	// Offset X - position of small arrow
    var arrow_offsetY = 0;	// Offset Y - position of small arrow

    var arrow_offsetX_firefox = -6;	// Firefox - offset X small arrow
    var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow

    var verticalSpaceBetweenListItems = 3;	// Pixels space between one <li> and next
    // Same value or higher as margin bottom in CSS for #dhtmlgoodies_dragDropContainer ul li,#dragContent li


    var initShuffleItems = true;	// Shuffle items before staring

    var indicateDestionationByUseOfArrow = true;	// Display arrow to indicate where object will be dropped(false = use rectangle)

    var lockedAfterDrag = false;	/* Lock items after they have been dragged, i.e. the user get's only one shot for the correct answer */


    /* END VARIABLES YOU COULD MODIFY */

    var dragDropTopContainer = false;
    var dragTimer = -1;
    var dragContentObj = false;
    var contentToBeDragged = false;	// Reference to dragged <li>
    var contentToBeDragged_src = false;	// Reference to parent of <li> before drag started
    var contentToBeDragged_next = false; 	// Reference to next sibling of <li> to be dragged
    var destinationObj = false;	// Reference to <UL> or <LI> where element is dropped.
    var dragDropIndicator = false;	// Reference to small arrow indicating where items will be dropped
    var ulPositionArray = new Array();
    var mouseoverObj = false;	// Reference to highlighted DIV

    var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
    var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
    var destinationBoxes = new Array();
    var indicateDestinationBox = false;

    function getTopPos(inputObj)
    {
        var returnValue = inputObj.offsetTop;
        while((inputObj = inputObj.offsetParent) != null){
            if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
        }
        return returnValue;
    }

    function getLeftPos(inputObj)
    {
        var returnValue = inputObj.offsetLeft;
        while((inputObj = inputObj.offsetParent) != null){
            if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
        }
        return returnValue;
    }

    function cancelEvent()
    {
        return false;
    }
    function initDrag(e)	// Mouse button is pressed down on a LI
    {
        if(document.all)e = event;
        if(lockedAfterDrag && this.parentNode.id!='allItems')return;

        var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
        var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);

        dragTimer = 0;
        dragContentObj.style.left = e.clientX + sl + 'px';
        dragContentObj.style.top = e.clientY + st + 'px';
        contentToBeDragged = this;
        contentToBeDragged_src = this.parentNode;
        contentToBeDragged_next = false;
        if(this.nextSibling){
            contentToBeDragged_next = this.nextSibling;
            if(!this.tagName && contentToBeDragged_next.nextSibling)contentToBeDragged_next = contentToBeDragged_next.nextSibling;
        }
        timerDrag();
        return false;
    }

    function everythingIsCorrect()
    {
        alert('Congratulations! Everything is correct');
    }


    function timerDrag()
    {
        if(dragTimer>=0 && dragTimer<10){
            dragTimer++;
            setTimeout('timerDrag()',10);
            return;
        }
        if(dragTimer==10){
            dragContentObj.style.display='block';
            dragContentObj.appendChild(contentToBeDragged);
        }
    }

    function moveDragContent(e)
    {
        if(dragTimer<10){
            if(contentToBeDragged){
                if(contentToBeDragged_next){
                    contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
                }else{
                    contentToBeDragged_src.appendChild(contentToBeDragged);
                }
            }
            return;
        }
        if(document.all)e = event;
        var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
        var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);


        dragContentObj.style.left = e.clientX + sl + 'px';
        dragContentObj.style.top = e.clientY + st + 'px';

        if(mouseoverObj)mouseoverObj.className='thetaskcontainer';
        destinationObj = false;
        dragDropIndicator.style.display='none';
        if(indicateDestinationBox)indicateDestinationBox.style.display='none';
        var x = e.clientX + sl;
        var y = e.clientY + st;
        var width = dragContentObj.offsetWidth;
        var height = dragContentObj.offsetHeight;

        var tmpOffsetX = arrow_offsetX;
        var tmpOffsetY = arrow_offsetY;
        if(!document.all){
            tmpOffsetX = arrow_offsetX_firefox;
            tmpOffsetY = arrow_offsetY_firefox;
        }

        for(var no=0;no<ulPositionArray.length;no++){
            var ul_leftPos = ulPositionArray[no]['left'];
            var ul_topPos = ulPositionArray[no]['top'];
            var ul_height = ulPositionArray[no]['height'];
            var ul_width = ulPositionArray[no]['width'];

            if((x+width) > ul_leftPos && x<(ul_leftPos + ul_width) && (y+height)> ul_topPos && y<(ul_topPos + ul_height)){
                var noExisting = ulPositionArray[no]['obj'].getElementsByTagName('LI').length;
                if(indicateDestinationBox && indicateDestinationBox.parentNode==ulPositionArray[no]['obj'])noExisting--;
                if(noExisting<boxSizeArray[no-1] || no==0){
                    dragDropIndicator.style.left = ul_leftPos + tmpOffsetX + 'px';
                    var subLi = ulPositionArray[no]['obj'].getElementsByTagName('LI');
                    for(var liIndex=0;liIndex<subLi.length;liIndex++){
                        var tmpTop = getTopPos(subLi[liIndex]);
                        if(!indicateDestionationByUseOfArrow){
                            if(y<tmpTop){
                                destinationObj = subLi[liIndex];
                                indicateDestinationBox.style.display='block';
                                subLi[liIndex].parentNode.insertBefore(indicateDestinationBox,subLi[liIndex]);
                                break;
                            }
                        }else{
                            if(y<tmpTop){
                                destinationObj = subLi[liIndex];
                                dragDropIndicator.style.top = tmpTop + tmpOffsetY - Math.round(dragDropIndicator.clientHeight/2) + 'px';
                                dragDropIndicator.style.display='block';
                                break;
                            }
                        }
                    }

                    if(!indicateDestionationByUseOfArrow){
                        if(indicateDestinationBox.style.display=='none'){
                            indicateDestinationBox.style.display='block';
                            ulPositionArray[no]['obj'].appendChild(indicateDestinationBox);
                        }

                    }else{
                        if(subLi.length>0 && dragDropIndicator.style.display=='none'){
                            dragDropIndicator.style.top = getTopPos(subLi[subLi.length-1]) + subLi[subLi.length-1].offsetHeight + tmpOffsetY + 'px';
                            dragDropIndicator.style.display='block';
                        }
                        if(subLi.length==0){
                            dragDropIndicator.style.top = ul_topPos + arrow_offsetY + 'px'
                            dragDropIndicator.style.display='block';
                        }
                    }

                    if(!destinationObj)destinationObj = ulPositionArray[no]['obj'];
                    mouseoverObj = ulPositionArray[no]['obj'].parentNode;
                    mouseoverObj.className='mouseover';
                    return;
                }
            }
        }
    }

    function checkAnswers()
    {

        for(var no=0;no<destinationBoxes.length;no++){
            var subLis = destinationBoxes[no].getElementsByTagName('LI');
            if(subLis.length<boxSizeArray[no])return;

            for(var no2=0;no2<subLis.length;no2++){
                if(subLis[no2].className=='wrongAnswer')return;
            }
        }

        everythingIsCorrect();


    }


    /* End dragging
     Put <LI> into a destination or back to where it came from.
     */
    function dragDropEnd(e)
    {
        if(dragTimer==-1)return;
        if(dragTimer<10){
            dragTimer = -1;
            return;
        }
        dragTimer = -1;
        if(document.all)e = event;
        if(destinationObj){
            var groupId = contentToBeDragged.getAttribute('groupId');
            if(!groupId)groupId = contentToBeDragged.groupId;

            var destinationToCheckOn = destinationObj;
            if(destinationObj.tagName!='UL'){
                destinationToCheckOn = destinationObj.parentNode;
            }

            var answerCheck = false;
            if(groupId == destinationToCheckOn.id){
                contentToBeDragged.className = 'correctAnswer';
                answerCheck=true;
            }else{
                contentToBeDragged.className = 'wrongAnswer';
            }
            if(destinationObj.id=='allItems' || destinationObj.parentNode.id=='allItems')contentToBeDragged.className='';


            if(destinationObj.tagName=='UL'){
                destinationObj.appendChild(contentToBeDragged);
            }else{
                destinationObj.parentNode.insertBefore(contentToBeDragged,destinationObj);
            }
            mouseoverObj.className='thetaskcontainer';
            destinationObj = false;
            dragDropIndicator.style.display='none';
            if(indicateDestinationBox){
                indicateDestinationBox.style.display='none';
                document.body.appendChild(indicateDestinationBox);
            }

            contentToBeDragged = false;

            if(answerCheck)checkAnswers();

            return;
        }
        if(contentToBeDragged_next){
            contentToBeDragged_src.insertBefore(contentToBeDragged,contentToBeDragged_next);
        }else{
            contentToBeDragged_src.appendChild(contentToBeDragged);
        }
        contentToBeDragged = false;
        dragDropIndicator.style.display='none';
        if(indicateDestinationBox){
            indicateDestinationBox.style.display='none';
            document.body.appendChild(indicateDestinationBox);

        }
        mouseoverObj = false;

    }

    /*
     Preparing data to be saved
     */
    function saveDragDropNodes()
    {
        var saveString = "";
        var uls = dragDropTopContainer.getElementsByTagName('UL');
        for(var no=0;no<uls.length;no++){	// LOoping through all <ul>
            var lis = uls[no].getElementsByTagName('LI');
            for(var no2=0;no2<lis.length;no2++){
                if(saveString.length>0)saveString = saveString + ";";
                saveString = saveString + uls[no].id + '|' + lis[no2].id;
            }
        }

        document.getElementById('saveContent').innerHTML = '<h1>Ready to save these nodes:</h1> ' + saveString.replace(/;/g,';<br>') + '<p>Format: ID of ul |(pipe) ID of li;(semicolon)</p><p>You can put these values into a hidden form fields, post it to the server and explode the submitted value there</p>';

    }

    function initDragDropScript()
    {
        dragContentObj = document.getElementById('dragContent');
        dragDropIndicator = document.getElementById('dragDropIndicator');
        dragDropTopContainer = document.getElementById('dhtmlgoodies_dragDropContainer');
        document.documentElement.onselectstart = cancelEvent;;
        var listItems = dragDropTopContainer.getElementsByTagName('LI');	// Get array containing all <LI>
        var itemHeight = false;
        for(var no=0;no<listItems.length;no++){
            listItems[no].onmousedown = initDrag;
            listItems[no].onselectstart = cancelEvent;
            if(!itemHeight)itemHeight = listItems[no].offsetHeight;
            if(MSIE && navigatorVersion/1<6){
                listItems[no].style.cursor='hand';
            }
        }

        var mainContainer = document.getElementById('dhtmlgoodies_mainContainer');
        var uls = mainContainer.getElementsByTagName('UL');
        itemHeight = itemHeight + verticalSpaceBetweenListItems;
        for(var no=0;no<uls.length;no++){
            uls[no].style.height = itemHeight * boxSizeArray[no]  + 'px';
            destinationBoxes[destinationBoxes.length] = uls[no];
        }

        var leftContainer = document.getElementById('dhtmlgoodies_listOfItems');
        var itemBox = leftContainer.getElementsByTagName('UL')[0];

        document.documentElement.onmousemove = moveDragContent;	// Mouse move event - moving draggable div
        document.documentElement.onmouseup = dragDropEnd;	// Mouse move event - moving draggable div

        var ulArray = dragDropTopContainer.getElementsByTagName('UL');
        for(var no=0;no<ulArray.length;no++){
            ulPositionArray[no] = new Array();
            ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);
            ulPositionArray[no]['top'] = getTopPos(ulArray[no]);
            ulPositionArray[no]['width'] = ulArray[no].offsetWidth;
            ulPositionArray[no]['height'] = ulArray[no].clientHeight;
            ulPositionArray[no]['obj'] = ulArray[no];
        }

        /*if(initShuffleItems){
            var allItemsObj = document.getElementById('allItems');
            var initItems = allItemsObj.getElementsByTagName('LI');

            for(var no=0;no<(initItems.length*10);no++){
                var itemIndex = Math.floor(Math.random()*initItems.length);
                allItemsObj.appendChild(initItems[itemIndex]);
            }
        }*/
        if(!indicateDestionationByUseOfArrow){
            indicateDestinationBox = document.createElement('LI');
            indicateDestinationBox.id = 'indicateDestination';
            indicateDestinationBox.style.display='none';
            document.body.appendChild(indicateDestinationBox);
        }

    }

    window.onload = initDragDropScript;
</script>

<div class="userwspace">
<h1>Buenos días, Juan Pablo</h1>
</div>
<div class="clear"></div>

<div id="dhtmlgoodies_dragDropContainer">

  <div id="dhtmlgoodies_listOfItems">
    <div class="thetaskcontainer" id="col1">
      <p>Por iniciar</p>
      <ul id="allItems">

        <li id="node2" groupId="box7">
          <div class="onetask lateme">

            <div class="title">Dibujo del león <span title="horas quedan">24 horas quedan</span><br>
              <div class="taskprogcont">
                <div class="taskprogbar">
                  <div class="taskprogressbar">
                    <div style="width: 0%;"></div>
                  </div> &nbsp; 0%
                </div>
              </div>
            </div>
            <div class="process">
              <img src="/images/icon2.png">
              <div class="fleft">
              <div class="processname">Animación</div>
              <div class="projectname">Animando la selva</div>
              </div>

            </div>
            <div class="clear"></div>
          </div>
        </li>
        <li id="node3" groupId="box3">
          <div class="onetask lateother">
            <div class="title">Ensamble de animación con música <span title="horas quedan">36 horas quedan</span><br>
              <div class="taskprogcont">
                <div class="taskprogbar">
                  <div class="taskprogressbar">
                    <div style="width: 0%;"></div>
                  </div> &nbsp; 0%
                </div>
              </div>
            </div>
            <div class="process">
              <img src="/images/icon2.png">
              <div class="fleft">
              <div class="processname">Animación</div>
              <div class="projectname">Animando la selva</div>
              </div>

            </div>
            <div class="clear"></div>
          </div>
        </li>

        <li id="node7" groupId="box2">
          <div class="onetask">
            <div class="title">Voz del león <span title="horas quedan">30 horas, Iniciar en 3 días</span><br>
              <div class="taskprogcont">
                <div class="taskprogbar">
                  <div class="taskprogressbar">
                    <div style="width: 0%;"></div>
                  </div> &nbsp; 0%
                </div>
              </div>
            </div>
            <div class="process">
              <img src="/images/icon1.png">
              <div class="fleft">
              <div class="processname">Videojuego de Coca-Cola</div>
              <div class="projectname">Proyecto de Colciencias</div>
              </div>

            </div>
            <div class="clear"></div>
          </div>
        </li>

      </ul>
    </div>
  </div>
  <div id="dhtmlgoodies_mainContainer">
    <!-- ONE <UL> for each "room" -->
    <div class="thetaskcontainer" id="col2">
      <p>en progreso</p>
      <ul id="box1">
        <li id="node5" groupId="box4">
          <div class="onetask">
            <div class="title">Hacer jingle <span title="horas quedan">7 horas quedan</span><br>
              <div class="taskprogcont">
                <div class="taskprogbar">
                  <div class="taskprogressbar">
                    <div style="width: 20%;"></div>
                  </div> &nbsp; 20%
                </div>
              </div>
            </div>
            <div class="process">
              <img src="/images/icon2.png">
              <div class="fleft">
              <div class="processname">Animación</div>
              <div class="projectname">Animando la selva</div>
              </div>

            </div>
            <div class="clear"></div>
          </div>
        </li>

        <li id="node6" groupId="box6">
          <div class="onetask">
            <div class="title">Diseñar los personajes <span title="horas quedan">13 horas quedan</span><br>
              <div class="taskprogcont">
                <div class="taskprogbar">
                  <div class="taskprogressbar">
                    <div style="width: 40%;"></div>
                  </div> &nbsp; 40%
                </div>
              </div>
            </div>
            <div class="process">
              <img src="/images/icon1.png">
              <div class="fleft">
              <div class="processname">Videojuego de Coca-Cola</div>
              <div class="projectname">Proyecto de Colciencias</div>
              </div>

            </div>
            <div class="clear"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="thetaskcontainer" id="col3">
      <p>terminadas</p>
      <ul id="box2">
        <li id="node1" groupId="box2">
          <div class="onetask">
            <div class="title">Story board<br>
              <div class="taskprogcont">
                <div class="taskprogbar">
                  <div class="taskprogressbar">
                    <div style="width: 100%;"></div>
                  </div> &nbsp; 100%
                </div>
              </div>
            </div>
            <div class="process">
              <img src="/images/icon1.png">
              <div class="fleft">
              <div class="processname">Videojuego de Coca-Cola</div>
              <div class="projectname">Proyecto de Colciencias</div>
              </div>

            </div>
            <div class="clear"></div>
          </div>
        </li>

        <li id="node4" groupId="box5">
          <div class="onetask">
            <div class="title">Instalar todas las herramientas<br>
              <div class="taskprogcont">
                <div class="taskprogbar">
                  <div class="taskprogressbar">
                    <div style="width: 100%;"></div>
                  </div> &nbsp; 100%
                </div>
              </div>
            </div>
            <div class="process">
              <img src="/images/icon2.png">
              <div class="fleft">
              <div class="processname">Preparación para comenzar</div>
              <div class="projectname">Animando la selva</div>
              </div>

            </div>
            <div class="clear"></div>
          </div>
        </li>

        <li id="node18" groupId="box1">
          <div class="onetask">
            <div class="title">Story board<br>
              <div class="taskprogcont">
                <div class="taskprogbar">
                  <div class="taskprogressbar">
                    <div style="width: 100%;"></div>
                  </div> &nbsp; 100%
                </div>
              </div>
            </div>
            <div class="process">
              <img src="/images/icon1.png">
              <div class="fleft">
              <div class="processname">Videojuego de Coca-Cola</div>
              <div class="projectname">Proyecto de Colciencias</div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </li>
      </ul>
    </div>



  </div>


</div>
<ul id="dragContent"></ul>
<div id="dragDropIndicator"><img src="/images/insert.gif"></div>
<div id="saveContent"></div>

<!--div class="userwspace">
  <h1>Buenos días, Juan Pablo</h1>
  <div class="taskcontainer">
    <div class="titlecontainer">
      Mis tareas
    </div>

















    <div class="bgdown"></div>
  </div>
</div-->